<!--
 * @Description: 顶部tabs栏模块页面 -- homes_tabs
 * @Author: your name
 * @Date: 2023-12-15
 * @LastEditTime: 2023-12-15
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="homes_tabs heart_w">
      <div class="user">
        <el-avatar size="large" :src="avatarUrl"></el-avatar>
        <div class="inner">
          <div class="name">{{ formUser.mobile }}</div>
        </div>
        <el-button round @click="logOut">退出登录</el-button>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs_back">
        <el-tab-pane label="个人资料" name="0">
          <!-- 账户管理 -->
          <div class="my_account">
            <div class="content">
              <div class="wrapper">
                <div class="wrapper-content">
                  <div class="item">
                    <div class="item-title">我的头像：</div>
                    <div class="avatar_uploader">
                      <el-upload
                        class="upload_t avatar"
                        ref="upload"
                        action="https://rongyue.rongyuejiaoyu.com/api/v1.common/upload"
                        list-type="picture-card"
                        :limit="1"
                        :on-success="handleAvatarSuccess"
                        :on-preview="imgPreview"
                        :on-remove="handleRemove"
                        :on-exceed="handleExceed"
                      >
                        <img v-if="avatarUrl" :src="avatarUrl" class="avatar" />
                        <i class="el-icon-plus" v-else></i>
                      </el-upload>
                    </div>
                    <el-button type="text" @click="handleReport">
                      修改
                    </el-button>
                  </div>
                  <div class="item">
                    <div class="item-title">我的昵称：</div>
                    <el-input
                      v-model="formUser.nickname"
                      :readonly="val_nickname"
                    >
                    </el-input>
                    <el-button type="text" @click="my_nickname">
                      修改昵称
                    </el-button>
                  </div>

                  <!-- 手机号 -->
                  <!-- <div class="item">
                    <div class="item-title">手机号：</div>
                    <el-input v-model="mobile" readonly></el-input>
                    <el-button type="text" @click="mobilePassword(false)">
                      修改手机号
                    </el-button>
                  </div> -->

                  <!-- 性别 -->
                  <div class="item">
                    <div class="item-title">性别：</div>
                    <el-radio
                      v-model="formUser.gender"
                      :label="item.id"
                      size="medium"
                      v-for="item in genderList"
                      :key="item.id"
                      @input="genderFunction(item)"
                    >
                      {{ item.name }}
                    </el-radio>
                  </div>
                  <!-- 工作状态 -->
                  <div class="item">
                    <div class="item-title">工作状态：</div>
                    <el-radio
                      v-model="formUser.work"
                      size="medium"
                      v-for="item_t in workList"
                      :key="item_t.id"
                      :label="item_t.id"
                      @input="setWorkStatus(item_t)"
                    >
                      {{ item_t.name }}
                    </el-radio>
                  </div>
                  <!-- 教育程度 -->
                  <div class="item">
                    <div class="item-title">教育程度：</div>
                    <el-radio
                      v-model="formUser.edu"
                      :label="item.id"
                      size="medium"
                      v-for="item in educationLevel"
                      :key="item.id"
                      @input="SetEdu(item)"
                    >
                      {{ item.name }}
                    </el-radio>
                  </div>
                  <!-- 兴趣爱好 -->
                  <div class="item">
                    <div class="item-title">兴趣爱好：</div>
                    <el-checkbox-group v-model="checkList">
                      <el-checkbox
                        v-for="item_k in hobbyLink"
                        :label="item_k.id"
                        :key="item_k.id"
                        @change="setHobbyLink(item_k)"
                      >
                        {{ item_k.name }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
              <div class="wrapper1">
                <div class="wrapper-title">密码设置</div>
                <div class="wrapper-content">
                  <div class="item">
                    <div>我的密码</div>
                    <div>**********</div>
                    <el-button type="text" @click="mobilePassword(true)">
                      修改密码
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 身份证认证 -->
              <div class="wrapper0">
                <div class="wrapper-title">实名认证</div>
                <div class="wrapper-content">
                  <div class="item_t" style="padding-bottom: 0">
                    <el-form
                      ref="form"
                      :model="realNameForm"
                      label-width="70px"
                    >
                      <el-form-item label="姓名">
                        <el-input
                          v-model="realNameForm.nameCode"
                          placeholder="请输入姓名"
                          style="width: 50%"
                        >
                        </el-input>
                      </el-form-item>
                      <el-form-item label="身份证号">
                        <el-input
                          v-model="realNameForm.IdNumber"
                          placeholder="请输入身份证号"
                          style="width: 50%"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                  <!-- <div
                    style="width: 54%; text-align: right; padding-bottom: 10px"
                  >
                    <el-button type="" round plain>身份认证</el-button>
                  </div> -->
                </div>
              </div>

              <!-- 手机号认证 -->
              <div class="wrapper0">
                <div class="wrapper-title">手机号认证</div>
                <div class="wrapper-content">
                  <div class="item_t">
                    绑定手机号：
                    <el-input
                      v-model="formUser.mobile"
                      placeholder="13203952910"
                      style="width: 45%"
                      :disabled="true"
                    >
                    </el-input>
                    已绑定
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="bottom_t">
              <el-button type="primary" round>保存</el-button>
            </div> -->
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="地址管理"
          name="6"
          style="background-color: transparent"
        >
          <receivingAddress></receivingAddress>
        </el-tab-pane>
        <el-tab-pane
          label="我的课程"
          name="1"
          style="background-color: transparent"
        >
          <myCourse></myCourse>
        </el-tab-pane>
        <el-tab-pane label="我的订单" name="4">
          <myOrderPage ref="myOrder" v-if="activeName == '4'"></myOrderPage>
        </el-tab-pane>
        <el-tab-pane label="我的收藏" name="2">
          <myShouCang></myShouCang>
        </el-tab-pane>
        <!-- <el-tab-pane label="我的错题" name="3">
          <el-tabs v-model="NameWrong" class="my-wrong">
            <el-tab-pane label="全部" name="0">
              <div class="all">
                <a href="#">
                  <div class="item-head">
                    <i class="el-icon-notebook-2"></i>
                    <div class="title">马克思主义基本原理概论</div>
                    <button>
                      <i class="el-icon-edit"></i>
                    </button>
                  </div>
                  <div class="item-body">
                    <span class="tag">单选题</span>
                    有24个偶数的平均数，如果保留一位小数的得数是15.9，那么保留两位小数的得数是（　　　）。
                  </div>
                </a>
              </div>
            </el-tab-pane>
            <el-tab-pane label="未掌握" name="1">
              <div class="no_grasp">213</div>
            </el-tab-pane>
            <el-tab-pane label="已掌握" name="2">
              <div class="all">
                <a href="#" v-for="item in 3" :key="item">
                  <div class="item-head">
                    <i class="el-icon-notebook-2"></i>
                    <div class="title">马克思主义基本原理概论</div>
                    <button>
                      <i class="el-icon-edit"></i>
                    </button>
                  </div>
                  <div class="item-body">
                    <span class="tag">单选题</span>
                    有24个偶数的平均数，如果保留一位小数的得数是15.9，那么保留两位小数的得数是（　　　）。
                  </div>
                </a>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane> -->
        <!-- <el-tab-pane label="资料下载" name="5" class="my_material">
          <el-empty image="http://zhishifufei.crmeb.net/pc/images/empty8.png">
          </el-empty>
        </el-tab-pane> -->
      </el-tabs>
    </div>

    <!-- 修改手机号 -- 修改密码 -->
    <!-- <el-dialog
      :title="mobileID_val ? '修改密码' : '修改手机号'"
      :visible.sync="dialogVisible"
      center
      width="30%"
      class="mobile_code"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-input v-model="form.mobile" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入验证码"
            v-model="form.code_input1"
            maxlength="6"
          >
            <el-button
              slot="append"
              type="text"
              @click="verifymask"
              :disabled="counter > 0 ? true : false"
              :style="counter > 0 ? 'color: #66b1ff' : ''"
            >
              {{
                counter > 0
                  ? `${counter < 10 ? '0' : ''}${counter} 秒后获取`
                  : '获取验证码'
              }}
            </el-button>
          </el-input>
        </el-form-item>

        <el-form-item v-show="mobileID_val">
          <el-input
            v-model="form.password"
            placeholder="请输入8-16位字母加数字组合新密码"
            maxlength="16"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="dialogVisible = false">
            确 定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <el-dialog
      :visible.sync="dialogVisible"
      center
      width="30%"
      class="mobile_code"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <div class="title_ts">
          <p :class="{ active: active_password == '0' }" @click="account_(0)">
            手机号修改密码
          </p>
          <p :class="{ active: active_password == '1' }" @click="account_(1)">
            账户密码修改
          </p>
        </div>

        <div v-if="active_password == '0'">
          <el-form-item>
            <el-input v-model="form.mobile" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入验证码"
              v-model="form.code_input1"
              maxlength="6"
            >
              <el-button
                slot="append"
                type="text"
                @click="verifymask"
                :disabled="counter > 0 ? true : false"
                :style="counter > 0 ? 'color: #66b1ff' : ''"
              >
                {{
                  counter > 0
                    ? `${counter < 10 ? '0' : ''}${counter} 秒后获取`
                    : '获取验证码'
                }}
              </el-button>
            </el-input>
          </el-form-item>
        </div>

        <div v-else>
          <el-form-item>
            <el-input
              v-model="form.password"
              placeholder="请输入原密码"
              maxlength="16"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.password"
              placeholder="请输入新密码"
              maxlength="16"
              show-password
              class="xinmima"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.password"
              placeholder="请再次确认新密码"
              maxlength="16"
              show-password
            >
            </el-input>
          </el-form-item>
        </div>

        <el-form-item style="text-align: center">
          <el-button
            type="primary"
            round
            @click="dialogVisible = false"
            style="width: 100%; padding: 15px 0; border-radius: 30px"
          >
            确 定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import myCourse from './common/myCourse.vue'
import myOrderPage from './common/myOrderPage.vue'
import myShouCang from './common/myShouCang.vue'
import receivingAddress from './common/receivingAddress.vue'
import {
  getDictList,
  getGenderList,
  setGender,
  setWork,
  setEduApi,
  setLike,
  setAvatar,
  uploadFile
} from '@/api/homes_tabs.js'
import { getUserData } from '@/api/header.js'

export default {
  name: 'homes_tabs',
  components: {
    myCourse,
    myOrderPage,
    myShouCang,
    receivingAddress
  },
  data() {
    return {
      imageUrl: '',
      checkList: [],
      globalUrl: 'https://rongyue.rongyuejiaoyu.com',
      avatarUrl: '',
      dialogVisible: false,
      disabled: false,
      activeName: '1', // tabs
      active_password: '0',
      NameWrong: '0',
      val_nickname: true,
      mobileID_val: false,
      counter: 0,
      realNameForm: {
        nameCode: '',
        IdNumber: ''
      },
      form: {
        mobile: '',
        password: '',
        code_input1: ''
      },
      formUser: {},
      workList: [], // 工作状态
      educationLevel: [], // 教育程度
      hobbyLink: [], // 兴趣爱好
      genderList: []
    }
  },
  created() {
    this.workingCondition()
    this.userData()
    console.log(this.$route.query)
    this.activeName = this.$route.query.typeActiveName
  },
  methods: {
    logOut() {
      this.$confirm('确定要退出登录吗？', '提示！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
        // type: 'warning'
      })
        .then(() => {
          this.$message.warning({
            type: 'warning',
            iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
            customClass: 'el-message--warning',
            message: '退出登录成功'
          })
          localStorage.removeItem('vuex_token')
          // store.state.showLoginStatus = true
          this.$router.push({ path: '/home' })
          setTimeout(() => {
            this.refreshT()
          }, 500)
        })
        .catch((error) => {
          console.log(error)
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    workingCondition() {
      getDictList({ type: 'work' }).then(({ data: dataWork }) => {
        this.workList = dataWork.data
      })
      getDictList({ type: 'edu' }).then(({ data: dataEdu }) => {
        this.educationLevel = dataEdu.data
      })
      // 兴趣爱好
      getDictList({ type: 'like' }).then(({ data: dataLink }) => {
        this.hobbyLink = dataLink.data
      })
      getGenderList().then(({ data: dataGender }) => {
        this.genderList = dataGender.data
      })
    },
    async updateUserData(dataUpdater) {
      await dataUpdater()
      this.userData()
    },
    genderFunction(item) {
      this.updateUserData(async () => await setGender({ gender: item.id }))
    },
    setWorkStatus(item) {
      this.updateUserData(async () => await setWork({ work: item.id }))
    },
    SetEdu(it) {
      this.updateUserData(async () => await setEduApi({ edu: it.id }))
    },
    setHobbyLink(item) {
      this.updateUserData(async () => await setLike({ like: item.id }))
    },
    async userData() {
      const { data: data } = await getUserData()
      this.formUser = data.data
      this.avatarUrl = this.globalUrl + data.data.avatar
      this.checkList.push(data.data.like)
    },
    account_(val) {
      this.active_password = val
    },
    handleClose(done) {
      done()
      this.form.password = ''
      this.form.code_input1 = ''
    },
    imgPreview(file) {
      this.wd_preview_img = file.url
      this.wd_preview_show = true
      console.log(file)
    },
    async handleAvatarSuccess(res, file) {
      this.imageUrl = res.fullurl
      await setAvatar({ avatar: res.data.url })
      this.$refs.upload.$children[1].$el.style.display = 'none'
      this.refreshT()
    },
    handleRemove(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          fileList.length
        } 个文件，共选择了 ${fileList.length + files.length} 个文件`
      )
    },
    handleClick(tab) {
      this.activeName = tab.name
      console.log(tab.name)
    },
    my_nickname() {
      this.val_nickname = !this.val_nickname
    },
    handleReport() {
      this.$refs['upload'].$refs['upload-inner'].handleClick()
    },
    mobilePassword(val) {
      this.dialogVisible = true
      this.mobileID_val = val
    },
    verifymask() {
      // this.$refs.verify.show()
      this.$message({
        message: '发送成功!',
        type: 'success'
      })
      this.counter = 15
      let timer = setInterval(() => {
        this.counter--
        if (this.counter <= 0) {
          clearInterval(timer)
          this.counter = 0
        }
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
@mixin border-color {
  ::v-deep .el-tabs__nav-wrap::after {
    display: block;
    height: 2px;
    background-color: #ececec !important;
  }
}

.homes_tabs {
  .el-breadcrumb {
    margin: 30px 0 20px;
    min-height: calc(100% - 20px);
  }

  .el-tabs {
    margin-top: 2px;
    margin-bottom: 55px;
  }

  ::v-deep {
    .el-tabs__header {
      padding: 0px;
      background-color: #fff;
    }
    .el-tabs__item {
      height: 56px;
      padding: 0 18px;
      font-size: 16px;
      line-height: 56px;
      color: #666;
    }
    .el-tabs__content {
      background-color: #fff;
    }
    .el-tabs__item.is-active {
      font-weight: bold;
      color: #2c8eff !important;
    }

    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
      padding-left: 25px !important;
    }
  }

  .tabs_back {
    ::v-deep .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
  }
}

.user {
  display: flex;
  align-items: center;
  padding: 28px 44px 28px 40px;
  background-color: #fff;
  font-size: 16px;
  color: #999;
  margin-top: 30px;

  .el-button {
    padding: 11px 26px;
    border-color: #2c8eff;
    font-size: 16px;
    color: #2c8eff;
  }

  .inner {
    flex: 1;
    margin-left: 30px;

    .name {
      margin-bottom: 8px;
      font-weight: bold;
      font-size: 18px;
      color: #282828;

      div {
        display: inline-block;
        height: 20px;
        padding-right: 14px;
        padding-left: 28px;
        border-radius: 10px;
        margin-left: 10px;
        background-color: #fff3e1;
        background: #fff3e1 url('@/assets/images/vip.png') 10px center/14px
          no-repeat;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        color: #9f620e;
      }
    }
  }

  .el-avatar {
    height: 84px;
    width: 84px;
    line-height: 84px;
  }
}

/* 账户管理 */
.my_account {
  padding-left: 54px;
  background-color: #fff;
  padding-bottom: 65px;

  .item:not(:first-child) {
    height: 17px;
  }

  ::v-deep .el-input__inner:read-only {
    border-color: transparent;
  }

  .content {
    .wrapper-title {
      padding-top: 34px;
      padding-left: 10px;
      padding-bottom: 12px;
      font-size: 18px;
      color: #282828;
    }
  }
}

.wrapper-content {
  padding-right: 46px;
  .item:first-child {
    .el-button {
      align-self: flex-end;
    }
  }

  .item {
    display: flex;
    align-items: center;
    padding: 26px 8px 26px 16px;
    border-bottom: 1px dashed #ddd;
    font-size: 14px;
    color: #282828;

    .el-button {
      margin-left: 50px;
      color: #2c8eff;
    }
  }
  .item-title {
    width: 105px;
    color: #777;
  }

  .item-title + div {
    flex: 1;
    padding-right: 15px;
    padding-left: 15px;
  }
}

.wrapper1 {
  .item {
    div:first-child {
      width: 105px;
      color: #777;
    }

    div:nth-child(2) {
      flex: 1;
      padding: 0 15px;
    }
  }
}

.bottom_t {
  padding: 38px 44px 43px 0;
  text-align: right;

  .el-button.is-round {
    padding: 11px 48px !important;
  }
}

.my-course {
  padding: 40px 50px;
  .el-empty {
    padding: 190px 0;
  }
}

.my-wrong {
  ::v-deep .el-tabs__header {
    padding: 0 !important;
    margin: 0 !important;
  }

  .no_grasp {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 30px 0 0 30px;
  }

  .all {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 30px 0 0 30px;

    .item-body {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height: 68px;
      padding: 20px 20px 0;
      border-top: 1px dashed #e2e2e2;
      margin-bottom: 29px;
      font-size: 16px;
      line-height: 24px;
      color: #282828;

      .tag {
        padding: 2px 10px;
        border-radius: 10px;
        margin-right: 10px;
        background-color: #f2f8ff;
        font-size: 12px;
        line-height: 16px;
        color: #2c8eff;
      }
    }

    .title {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 18px;
      line-height: 24px;
      font-family: Microsoft YaHei;
      color: #282828;
    }

    .item-head {
      display: flex;
      align-items: center;
      padding: 13px 20px 26px;

      .el-icon-notebook-2 {
        margin-right: 4px;
        font-size: 20px;
        color: #2c8eff;
      }

      button {
        border: none;
        margin-left: 4px;
        background: none;

        .el-icon-edit {
          font-size: 20px;
          color: #2c8eff;
        }
      }
    }

    a {
      border-radius: 6px;
      width: 555px;
      margin: 0 30px 30px 0;
      box-shadow: 0 3px 20px rgb(0 0 0 / 10%);
    }
  }

  // @include border-color();
}

/* 资料下载 */
.my_material {
  .el-empty {
    height: 600px;
    ::v-deep .el-empty__image {
      width: inherit;
    }
  }
}

.avatar_uploader {
  ::v-deep .el-upload--picture-card {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    line-height: 85px;

    &:hover {
      border-color: rgba(0, 0, 0, 0.5);
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      vertical-align: inherit;
    }
  }
}

/* 账户管理修改密码-手机号 */

.mobile_code {
  .xinmima {
    ::v-deep .el-input__inner {
      border-radius: 24px !important;
    }
  }
  .title_ts {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 52px;
    line-height: 52px;
    margin-bottom: 8px;
    p {
      cursor: pointer;
      font-size: 18px;
      color: #282828;
    }
    .active {
      color: #2c8eff;
      font-weight: bold;
    }
  }

  ::v-deep {
    .el-dialog__header {
      padding-top: 47px;
    }
    .el-dialog__headerbtn {
      font-size: 20px;
    }

    .el-dialog__body {
      padding: 17px 56px 59px;
    }

    .el-form-item__content {
      margin-left: 0 !important;
    }
  }

  ::v-deep .el-dialog__body {
    .el-input__inner {
      height: 50px;
      border-radius: 25px;
      font-size: 14px;
      line-height: 50px;
    }
  }

  .el-form-item:nth-child(2) {
    ::v-deep .el-input__inner {
      border-radius: 0;
      border-top-left-radius: 24px !important;
      border-bottom-left-radius: 24px !important;
    }

    ::v-deep .el-input-group__append {
      color: #2c8eff;
      background-color: transparent;
      width: 65px;
      text-align: center;
      border-top-right-radius: 24px;
      border-bottom-right-radius: 24px;
    }
  }
}

/* 实名认证 */
.wrapper0 {
  .wrapper-content {
    border-bottom: 1px dashed #ddd;

    .item_t {
      padding: 15px;
      font-size: 14px;
      color: #282828;
    }
  }
}

::v-deep .el-upload-list__item {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 85px;
  transition: none !important;
}
</style>
